<link rel="stylesheet" type="text/css" href="./css/frame3.css?v=1.0.1" />
<style>
    .name-wrap .tag {
        font-size: 10px;
        color: #fff;
        border-radius: 2px;
        height: 16px;
        width: 25px;
        /* background: #673AB7; */
        margin-left: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .name-wrap .tag.girl-tag {
        /* background: linear-gradient(24deg, #FF5D6E, #ffeb3b, #FF5D6E); */
        background-image: url('./image/icon/girl.png');
        background-color: none;
        width: 34.5px;
        height: 21px;
        ;
    }

    .name-wrap .tag.real-tag {
        /* background: linear-gradient(24deg, #4caf50, #ffeb3b, #4caf50); */
        background-image: url('./image/icon/real.png');
        background-color: none;
        width: 36px;
        height: 21px;
        ;
    }


    /* 弹窗 */
    #prompt {
        position: fixed;
        width: 100vw;
        max-width: 750px;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 101;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
    }

    #prompt .prompt-content {
        background: #fff;
        border-radius: 10px;
        box-shadow: #000 0 2px 5px;
        padding: 10px;
        width: 80%;
    }

    #prompt h3 {
        font-size: 16px;
    }

    #prompt .prompt-input {
        border-bottom: 1px solid #ddd;
    }

    #prompt .pro-btn {
        width: 50%;
        text-align: center;
        height: 40px;
        font-size: 14px;
        color: #757575;
        border-right: 1px solid #ddd;
    }

    #prompt .pro-sub-btn {
        color: #673AB7;
        border-right: none;
    }

    .my-data {
        width: 80vw;
        margin-top: 10px;
        max-width: 750px;
    }

    .my-data .base-icon {
        width: 30px;
        height: 25px;
        background-size: 100%;
    }

    .my-data .li {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .my-data span {
        color: #333;
        font-size: 12px;
    }
</style>

<div id="view" v-cloak>
    <header class="w-bg" id="fn-head">
        <ul class="h-wrap">
            <li class="h-list">
                <div class="for flex-bt">
                    <div class="edit" style="visibility: hidden;">占位占位</div>
                    <div class="title flex-c">{{listData.name}}</div>
                    <span class="edit" onclick="_url({url:'frame4/user', title:'个人资料', moreTitle: '保存'})">编辑资料</span>
                </div>
            </li>
        </ul>
    </header>
    <section class="m-frame">
        <div class="tx-wrap flex-c flex-col w-bg new-padding-10">
            <div class="tx img-h" onclick="changeHeader()">
                <img :src="imgUrl+listData.head_portrait" @load="imgCss(imgUrl+listData.head_portrait, $event)" onerror="this.onerror=null;this.src='./image/touxiang.png'" alt="">
            </div>
            <div class="tag-wrap new-margin-tb-10">
                <span class="tag">{{listData.city}}</span>
                <span class="tag">{{listData.age}}岁</span>
                <span class="tag">{{listData.occupation}}</span>
            </div>
            <p class="area" v-if="listData.offten_city">常驻城市：{{listData.offten_city}}</p>
            <div class="real name-wrap new-margin-t-10" v-if="listData.is_identity_authentication == 2 || listData.nvshen == 1">
                <div class="flex" v-if="listData.is_identity_authentication == 2">
                    <span class="real-tag tag"></span>
                    <span class="font-s">TA通过面容识别认证真实性</span>
                </div>
                <div class="flex new-margin-t-10" v-if="listData.nvshen == 1">
                    <span class="girl-tag tag"></span>
                    <span class="font-s">TA已获得面具公园女神认证</span>
                </div>
            </div>
            <ul class="flex-a my-data">
                <li class="li" onclick="_url({url:'frame4/user', title:'个人资料', moreTitle: '保存'})">
                    <i class="base-icon my-data-icon"></i>
                    <span>编辑资料</span>
                </li>
                <li class="li" onclick="_url({url: 'frame4/wo_de_yu_e_frame', title: '钱包'})">
                    <i class="base-icon my-money-icon"></i>
                    <span>钱包</span>
                </li>
                <li class="li" onclick="_url({url:'frame4/collect_frame', title:'我喜欢的'})">
                    <i class="base-icon my-like-icon"></i>
                    <span>我的收藏</span>
                </li>
            </ul>
        </div>

        <ul class="item">
            <li class="item_li" v-if="listData.is_identity_authentication != 2"
                onclick="_url({url:'frame4/authentication_frame', title:'认证身份'})">
                <div class="lt">认证中心</div>
                <div class="rt">
                    <span class="f-size12" v-if="listData.is_identity_authentication == 0">马上认证</span>
                    <span class="f-size12" v-if="listData.is_identity_authentication == 1">审核中</span>
                    <span class="f-size12" v-if="listData.is_identity_authentication == 3">认证失败</span>
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li>
            <li class="item_li" v-if="listData.sex =='男'" onclick="_url({ url: 'frame4', title: '开通会员'})">
                <div class="lt">会员</div>
                <div class="rt">
                    <span class="f-size12" v-if="listData.is_vip > 0">您已经是尊贵的VIP会员了</span>
                    <span class="f-size12" v-if="listData.is_vip == 0">升级会员尊享特权</span>
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li>

            <!-- <li class="item_li" onclick="_url({url: 'frame4/wo_de_yu_e_frame', title: '钱包'})" id="qianbao">
                <div class="lt">钱包</div>
                <div class="rt">
                    <span class="f-size12">{{ listData.volley }}元</span>
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li> -->

        </ul>
        <ul class="item">
            <li class="item_li" onclick="_url({url:'frame4/Broadcast_frame', title:'我的动态'})">
                <div class="lt">我的动态</div>
                <div class="rt">
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li>
        </ul>

        <div class="pushImg">
            <div class="pushImg1" v-if="imgList.length == 0">
                <img src="./image/add.png" style="padding: 20px;border: 1px dashed #ccc;border-radius: 5px;" onclick="selectAddType()">
                <p style="font-size: 15px;padding: 10px 0;">上传我的第一张照片</p>
                <p style="font-size: 12px;color: #ccc;padding-bottom: 20px;" v-if="listData.sex == '女'"> 照片可以让男士对约会更有安全感
                </p>
                <p style="font-size: 12px;color: #ccc;padding-bottom: 20px;" v-if="listData.sex == '男'"> 照片可以让女士对约会更有安全感
                </p>
            </div>
            <div class="pushImg2" v-if="imgList.length > 0">
                <div class="li" v-for="(i, sindex) in imgList">
                    <div class="img img-h" v-if="i.types == 1"  @click="_url({imgArr:bigImgList, iIndex:sindex, url: 'frame1/dy_img', title: '查看图片'})">
                        <img class="img" :src="imgUrl+i.pic[0]" @load="imgCss(imgUrl+i.pic[0], $event)">
                    </div>
                    <div class="img img-h" v-if="i.types == 2"  @click="_url({url: 'frame3/video', title: '查看视频', video:i.pic[0], cover:i.cover, type:1, packet:0, burn:0, id:i.id,})">
                        <img class="img" :src="imgUrl+i.cover" @load="imgCss(imgUrl+i.cover, $event)">
                    </div>
                    <i v-if="i.types == 2" class="base-icon my-play-icon" @click="_url({url: 'frame3/video', title: '查看视频', video:i.pic[0], cover:i.cover, type:1, packet:0, burn:0, id:i.id,})"></i>
                    <p class="showImg_permission" v-if="i.burn == '1' && i.packet > 0">阅后即焚的<br>红包<span v-if="i.types == 1">照片</span><span v-if="i.types == 2">视频</span></p>
                    <p class="showImg_permission" v-if="i.burn == '1' && i.packet == 0">阅后即焚</p>
                    <p class="showImg_permission" v-if="i.burn == '0' && i.packet > 0">红包<span v-if="i.types == 1">照片</span><span v-if="i.types == 2">视频</span></p>
                    <i class="aui-iconfont aui-icon-close" @click.stop @click="delImg(i.id, i.types)"></i>
                </div>
                <div class="li">
                    <div class="add">
                        <img src="./image/icon/add.png" onclick="selectAddType()">
                    </div>
                </div>
            </div>
        </div>
        <ul class="item" style="margin-top: 0;">
            <li class="item_li quanxian" onclick="quanxian();">
                <div class="lt">相册隐私</div>
                <div class="rt">
                    <span class="f-size12" v-if="listData.img_auth == '0' || !listData.img_auth">公开（推荐）</span>
                    <span class="f-size12" v-if="listData.img_auth == '1'">查看相册付费</span>
                    <span class="f-size12" v-if="listData.img_auth == '2'">查看前需要通过我的验证</span>
                    <span class="f-size12" v-if="listData.img_auth == '3'">隐身</span>
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li>
        </ul>
       
        <ul class="item">
            <!-- <li class="item_li" onclick="_url({url:'frame4/collect_frame', title:'我喜欢的'})">
                <div class="lt">我喜欢的</div>
                <div class="rt">
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li> -->
            <li class="item_li" onclick="_url({url:'frame4/wo_de_hei_ming_dan_frame', title: '黑名单'})">
                <span class="lt">黑名单</span>
                <span class="aui-iconfont aui-icon-right"></span>
            </li>
        </ul>
        <ul class="item">
            <li class="item_li" onclick="_url({url:'frame4/history_frm', title:'我的足迹'})">
                <div>
                    <span class="lt new-margin-r-10">我的足迹</span>
                </div>
                <span class="aui-iconfont aui-icon-right"></span>
            </li>
            <li class="item_li">
                <div>
                    <span class="lt new-margin-r-10">历史访客</span>
                    <span>有{{listData.see || 0}}个人看过你</span>
                </div>
                <span class="aui-iconfont aui-icon-right"></span>
            </li>

            <li class="item_li" onclick="clear_hurn()">
                <div>
                    <span class="lt new-margin-r-10">阅后即焚</span>
                    <span>已有{{ listData.burn || '0' }}个人焚毁了你的照片</span>
                </div>
                <span style="color:#673AB7;">一键恢复</span>
            </li>
        </ul>
        <!-- <ul class="item">
            <li class="item_li" style="margin: 10px 0;" onclick="goshare()">
                <div class="lt">邀请好友</div>
                <div class="rt ">
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li>
        </ul> -->
        <!-- <ul class="item">
            <li class="item_li" style="margin: 10px 0;" @click="_url({url:'frame3/sz', title:'设置', phone: listData.phone})">
                <div class="lt">设置</div>
                <div class="rt ">
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>
            </li>
        </ul> -->
        <ul class="item">
            <li class="item_li" style="margin-top: 18px;">
                <div>我的邀请码</div>
                <div>{{listData.send_code}}</div>
                <span style="color:#673AB7;" @click="copyTxt(listData.send_code)">一键复制</span>
            </li>
        </ul>
    </section>
    <div id="prompt" class="new-hide">
        <div class="prompt-content">
            <h3 class="prompt-title">请输入金额</h3>
            <div class="prompt-input new-padding-tb-10 new-margin-b-10">
                <input type="text" onkeyup="limitMoney(this)">
            </div>
            <div class="prompt-footer flex-bt">
                <button class="pro-btn pro-del-btn" onclick="proFn(0)">取消</button>
                <button class="pro-btn pro-sub-btn" onclick="proFn(1)">确定</button>
            </div>
        </div>
    </div>
    <input type="file" id="pic" accept="image/*" style="display: none;">
    <input type="file" id="head-pic" accept="image/*" style="display: none;">
    <input type="file" id="video" accept="video/*" style="display: none;">
    <input type="file" id="video-cover" accept="image/*" style="display: none;">
</div>
<script src="./script/copy.js?v=1.0.1"></script>
<script src="./script/frame3.js?v=1.0.1"></script>